<template>
	<div class="wrap" >
		<el-row v-loading="isLoading" :class="{ ishidden : isLoading}">
		  <el-col :span="16">
				<p class="title">MV详情</p>
				<!-- 播放器 -->
				<player :mvUrl="mvUrl" :picUrl="picUrl"></player>
				<!-- 人物介绍 -->
				<div class="introduce clearfix">
					<img v-lazy="singerUrl + '?param=120y120'">
					<p>{{ mvData.artistName }}</p>
				</div>
				<p class="song-name">{{ mvData.name }}</p>
				<p class="describe"><span>发布：{{ mvData.publishTime }}</span><span>播放： {{ mvData.playCount }}次</span></p>
				<!-- 评论区 -->
				<p class="title" v-if="mvComment.hotComments && mvComment.hotComments[0]">热门评论</p>
				<comment :comment="mvComment.hotComments"></comment>
				<p class="title" v-if="mvComment.comments && mvComment.comments[0]">最新评论</p>
				<comment :comment="mvComment.comments"></comment>
			</el-col>
			<!-- 相关推荐区 -->
		  <el-col :span="8" class="right">
				<p class="title">相关推荐</p>
				<mv-related-recommendations></mv-related-recommendations>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getMv, getMvUrl, singerInfo, mvComment } from "@/network/mv.js"
	import Player from "@/components/player/Player.vue"
	import Comment from "@/components/comment/Comment.vue"
	import MvRelatedRecommendations from "@/components/mvRelatedRecommendations/MvRelatedRecommendations.vue"
	export default {
		name: 'Mv',
		data() {
			return {
				mvData: {},
				mvUrl: '',
				picUrl:'',
				isLoading: true,
				singerUrl: '',
				mvComment: {}
			}
		},
		created() {
			document.getElementsByClassName("el-main")[0].scrollTop = 0;
			if(!this.$route.params.id) return;
			// 获取mv数据
			getMv(this.$route.params.id).then(res => {
				this.mvData = res.data.data;
				this.picUrl = res.data.data.cover;
				// 获取歌手信息背景
				singerInfo(this.mvData.artistId).then(res => {
					this.singerUrl = res.data.artist.picUrl;
				})
				// 获取mvUrl
				return getMvUrl(res.data.mp.id);
			}).then(res => {
				this.mvUrl = res.data.data.url;
				this.isLoading = false;
			})
			// 获取mv评论
			mvComment(this.$route.params.id).then(res => {
				this.mvComment = res.data;
			})
		},
		components: {
			Player,
			Comment,
			MvRelatedRecommendations
		}
		
	}
</script>

<style lang="less" scoped>
	.title {
		font-size: 18px;
		color: var(--main-font-color);
		font-weight: bold;
		margin: 18px 0;
	}
	.right {
		
	}
	.introduce {
		// height: 85px;
	}
	.introduce img {
		float: left;
		height: 65px;
		width: 65px;
		border-radius: 50%;
		margin-right: 15px;
		margin-top: 15px;
	}
	.introduce p {
		line-height: 68px;
		float: left;
		font-size: var(--second-font-size);
		color: var(--routine-font-color);
	}
	.song-name {
		font-size: var(--big-font-size);
		color: var(--routine-font-color);
		font-weight: bold;
	}
	.describe {
		font-size: var(--small-font-size);
		color: var(--secondary-font-color);
		margin-bottom: 50px;
	}
	.describe span {
		margin-right: 30px;
	}
	.ishidden {
		height: 83vh;
		overflow: hidden;
	}
</style>
